<template>
    <div v-loading="loading">
        <template v-for="msg in msglist">
            <el-alert
                    style="margin-bottom: 2px"
                    :title="msg.text"
                    :type="msg.type">
            </el-alert>
        </template>

        <el-form status-icon label-width="100px" style="margin-top: 20px;">
            <el-form-item label="数据库地址" prop="pass">
                <el-input type="text" v-model="host"></el-input>
            </el-form-item>

            <el-form-item label="数据库用户名" prop="pass">
                <el-input type="text" v-model="user"></el-input>
            </el-form-item>

            <el-form-item label="数据库密码" prop="age">
                <el-input type="password" v-model="pass"></el-input>
            </el-form-item>

            <el-form-item label="数据库名称" prop="age">
                <el-input type="text" v-model="name"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="post()">提交</el-button>
                <el-button @click="reset()">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    export default {
        name:"step_2",
        methods:{
            post(){
                this.loading=true;
                this.$http.get(this.$_URL,{
                    params:{
                        do:'SetMySQL',
                        host:this.host,
                        user:this.user,
                        pass:this.pass,
                        name:this.name
                    }
                }).then((data)=>{
                    this.loading=false;
                    if(data.body.error){
                        this.msg(data.body.error,"error");
                        return
                    }
                    if(data.body.result === "done"){
                        this.$router.app.$emit('next')
                        return;
                    }
                    this.msg("未知错误，请重试","error");
                },(err)=>{
                    this.loading=false;
                    this.msg("未知错误，请重试","error");
                })
            },
            reset(){
                this.host="localhost";
                this.pass="";
                this.user="root";
                this.name="database"
            },
            msg(text,type="success"){
                this.msglist.push({text:text,type:type});
            }
        },
        data:function () {
            return {
                loading:false,
                host:"localhost",
                pass:"",
                user:"root",
                name:"database",
                msglist:[]
            }
        }
    }

</script>